<template>
  <div class="dashboard-container">
    <div class="app-container">
      <h2>
        作用于插槽
      </h2>
      <hr>
      <show-name first-name="Tom" last-name="Green" />
      <show-name first-name="平安" last-name="陈">
        <template v-slot="{info}">{{ info.lname+" "+info.fname }}
        </template>
      </show-name>
      <hr>
      <el-table :data="list">
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="年龄" prop="age" />
        <el-table-column label="性别" prop="gender">
          <template v-slot="{row}">
            {{ row.gender===1?"男":"女" }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <hr>
    <el-tree :data="departs">
      <template v-slot="scoped">
        {{ scoped.data.name }}
      </template>
    </el-tree>
  </div>
</template>

<script>
import ShowName from './components/ShowName.vue'
export default {
  components: { ShowName },
  data () {
    return {
      list: [{
        name: '张三',
        age: 18,
        gender: 1
      },
      {
        name: '李四',
        age: 19,
        gender: 1
      },
      {
        name: '王五',
        age: 20,
        gender: 2
      }
      ],
      departs: [
        { id: 1, name: 'tom' },
        { id: 2, name: 'jerry' },
        { id: 3, name: 'spike' },
        { id: 4, name: 'kitty' }
      ]
    }
  }

}
</script>

<style lang="scss" scoped>
</style>
